<template>
  <div class="work-container">
    <van-panel title="计件报工单">
      <van-list>
        <van-cell
          v-if="jijian_data.slModule"
          title="模块"
          :value="jijian_data.slModule.moduleName"
        />
        <van-cell
          v-if="jijian_data.slWorkshop"
          title="车间"
          :value="jijian_data.slWorkshop.workshopName"
        />
        <van-cell
          v-if="jijian_data.slGprocess"
          title="大工序"
          :value="jijian_data.slGprocess.gprocessName"
        />
        <van-cell
          title="小工序ID"
          v-if="jijian_data.slProcess"
          :value="jijian_data.slProcess.processName"
        />
        <van-cell
          title="工序单价"
          :value="jijian_data.processPay"
        />
        <van-cell
          title="生产鼓号"
          :value="jijian_data.wtermDnumber"
        />
        <van-cell
          title="订单编号/生产批号"
          :value="jijian_data.wtermOnumber"
        />
        <van-cell
          title="品种"
          :value="jijian_data.breedName"
        />
        <van-cell
          title="颜色"
          :value="jijian_data.colourName"
        />
        <van-cell
          title="工艺要求"
          :value="jijian_data.rworkTr"
        />
        <van-cell
          title="单位"
          :value="jijian_data.rworkDw"
        />
        <van-cell
          title="计划生产"
          :value="jijian_data.rworkPlan"
        />
        <van-cell
          title="实际生产"
          :value="jijian_data.rworkActual"
        />
        <van-cell
          title="重复次数"
          :value="jijian_data.rworkRepetitions"
        />
        <van-cell
          title="开始时间"
          :value="jijian_data.rworkStart"
        />
        <van-cell
          title="结束时间"
          :value="jijian_data.rworkEnd"
        />
        <van-cell
          title="工作时长"
          :value="jijian_data.rworkDuration"
        />
        <van-cell
          title="预估工资"
          :value="jijian_data.estimatePay"
        />
      </van-list>
    </van-panel>
    <van-panel title="操作人">
      <div
        v-for="(person, index) in jijian_data.slRworkRmemberList"
        :key="index"
        class="user-panel"
      >
        <van-cell
          title="参与人"
          :value="person.rmemberNick"
        />
        <van-cell
          title="班组"
          :value="selectDictLabel(dict.type.sl_rwork_class, person.rmemberBz)"
        />
        <van-cell
          title="时长"
          :value="person.rmemberDuration"
        />
      </div>
    </van-panel>
    <van-panel
      v-if="dmList.length"
      title="扣款记录"
    >
      <div
        v-for="(item, index) in dmList"
        :key="index"
        class="user-panel"
      >
        <van-cell
          title="扣款时间"
          :value="parseTime(item.dmTime, '{y}-{m}-{d} {h}:{i}:{s}')"
        />
        <van-cell
          title="扣款人"
          :value="item.dmNick"
        />
        <van-cell
          title="扣款金额"
          :value="item.dmAmount"
        />
        <van-cell
          title="扣款原因"
          :value="item.dmReason"
        />
      </div>
    </van-panel>
    <!-- <div
      v-if="rfworkId"
      class="fixed-bar"
    >
      <van-button
        type="info"
        round
        @click="handleDm"
      >扣款</van-button>
    </div> -->
    <van-popup
      v-model="showDm"
      closeable
      round
      position="bottom"
      @closed="popupClosed"
    >
      <van-nav-bar title="扣款" />
      <van-form
        ref="dmForm"
        @submit="onSubmit"
      >
        <van-field
          v-model="dmform.dmAmount"
          name="扣款金额"
          label="扣款金额"
          type="number"
          placeholder="请输入金额"
          :rules="[{ required: true, message: '请输入金额' }]"
        />
        <van-field
          v-model="dmform.dmReason"
          type="textarea"
          name="扣款原因"
          label="扣款原因"
          placeholder="请输入原因"
          :rules="[{ required: true, message: '请输入原因' }]"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            native-type="submit"
          >提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { Notify } from "vant";

import { getRwork } from "@/api/sl/rwork";
import { addDm } from "@/api/sl/dm";

export default {
  name: "h5Job",
  components: {
    [Notify.Component.name]: Notify.Component,
  },
  dicts: ['sl_rwork_class'],
  data() {
    return {
      // 查询参数
      rworkId: undefined,
      rfworkId: undefined,
      loading: false,
      jijian_data: {},
      dmform: {},
      dmList: [],
      showDm: false
    };
  },
  computed: {},
  created() {
    this.rworkId = this.$route.query.rworkId;
    this.rfworkId = this.$route.query.rfworkId;
    this.load();
  },
  methods: {
    load() {
      this.getRwork();
      // if (this.rfworkId) {
      //   this.listDmByRworkId();
      // }
    },
    /** 查询报工项列表 */
    getRwork() {
      this.loading = true
      getRwork(this.rworkId).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.jijian_data = response.data
        } else {
          Notify({ type: "danger", message: "出错了" });
        }
        this.loading = false
      });
    },
    listDmByRworkId() {
      this.loading = true
      listDmByRworkId(this.rworkId, this.rfworkId).then((response) => {
        console.log(response)
        if (response.code === 200) {
          this.dmList = response.data;
        } else {
          Notify({ type: "danger", message: "出错了" });
        }
        this.loading = false
      });
    },
    handleDm() {
      this.showDm = true;
    },
    popupClosed() {
      this.$refs.dmForm.resetValidation();
      this.dmform = {};
    },
    onSubmit() {
      this.dmform.rworkId = this.rworkId;
      this.dmform.rfworkId = this.rfworkId;
      addDm(this.dmform).then(response => {
        Notify({ type: "success", message: "扣款成功" });
        this.listDmByRworkId();
        this.showDm = false;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.work-container {
  padding-bottom: 80px;
  &::v-deep {
    .van-cell-group {
      & + .van-cell-group {
        margin-top: 10px;
      }
    }
    .van-panel__header {
      font-size: 16px;
      font-weight: bold;
      span {
        &::before {
          content: '□';
          margin-right: 6px;
        }
      }
    }
    .van-panel__content {
      padding: 15px;
    }
  }
}
.user-panel {
  position: relative;
  padding: 5px;
  background-color: #ebedf0;
  margin-top: 5px;
}
.fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 10px 5px rgba(51, 51, 51, 0.04);
  button {
    width: 100%;
  }
}
@media (max-width: 550px) {
}
</style>
